<template>
	<view :style="colorStyle">
		<view class="list" v-for="(item,index) in userBillList" :key="index">
			<view class="listl">
				<image :src="item.img" class="img"></image>
			</view>
			<view class="listr">
				<view class="listrt">
					<view class="name">{{item.name}}</view>
					<view class="biao">营业中</view>
					<view class="biao" v-if="item.can_change_battery==1">可换电</view>
				</view>
				<view class="addres">
					<image src="/static/images/battery3.png" class="aimg"></image>
					<view class="title">{{item.address}}</view>
				</view>
				<view class="time">
					<image src="/static/images/battery4.png" class="timg"></image>
					<view class="title">{{item.trade_str}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserCoupons
	} from '@/api/api.js';
	
	import {
		batteryShopList
	} from '@/api/public.js';	
	
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import home from '@/components/home';
	import colors from '@/mixins/color.js';
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			home
		},
		mixins: [colors],
		data() {
			return {
				show: false,
				customBar:0,
				userBillList: []
			};
		},

		onLoad() {
			
		},
		onShow() {
			this.getUserBillList();
		},
		onReachBottom() {
			
		},
		
		methods: {
			getUserBillList: function() {
				let that = this;

				let data = {
			
				}
				batteryShopList(data).then(function(res) {
					let list = res.data.list;
					that.userBillList=list;
					console.log(list)
				}, function(res) {
					that.loading = false;
					that.loadTitle = '加载更多';
				});
			}
		}
	}
</script>


<style lang="less" scoped>
	.list{
		padding: 30rpx;
		display: flex;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx auto 0;
		box-sizing: border-box;
		.listl{
			flex: 0 0 100rpx;
			.img{
				width: 100%;
				height: 100rpx;
				border-radius: 50%;
			}
		}
		.listr{
			padding-top: 7rpx;
			flex: 1;
			overflow: hidden;
			padding-left: 20rpx;
			.listrt{
				display: flex;
				overflow: hidden;
				align-items: center;
				.name{
					flex: 1;
					overflow: hidden;
					font-weight: 500;
					color: #252525;
					line-height: 42rpx;
					font-size: 30rpx;
					height: 42rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.biao{
					color: #FFFFFF;
					line-height: 28rpx;
					background: #26B3FC;
					border-radius: 4rpx;
					margin-left: 10rpx;
					padding:0 4rpx;
					font-size: 20rpx;
				}
			}
			.addres{
				padding: 10rpx 0;
				display: flex;
				overflow: hidden;
				.aimg{
					flex: 0 0 28rpx;
					height: 32rpx;
				}
				.title{
					flex: 1;
					overflow: hidden;
					padding-left: 10rpx;
					color: #999999;
					line-height: 40rpx;
					height: 40rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 28rpx;
				}
			}
			.time{
				display: flex;
				.timg{
					flex: 0 0 28rpx;
					height: 28rpx;
				}
				.title{
					font-size: 28rpx;
					flex: 0 0 376rpx;
					padding-left: 10rpx;
					color: #999999;
					line-height: 40rpx;
				}
			}
		}
	}
</style>
